<app-toolbar>
    <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
            <i nz-icon nzType="reload" [nzSpin]="loading"></i>
            刷新
        </button>
        <app-search-box
            *nzSpaceItem
            (onSearch)="search($event)"
        ></app-search-box>
        <button *nzSpaceItem nz-button nzType="primary" (click)="handleEdit()">
            <i nz-icon nzType="plus"></i>
            创建总线
        </button>
        <button nz-button nzType="primary" *nzSpaceItem class="btn">
            <span nz-icon nzType="cloud-download" nzTheme="outline"></span>
            <a (click)="handleExport()" download="filename" [href]="href"
                >导出</a
            >
        </button>
        <app-import *nzSpaceItem [url]="'broker/import'"></app-import>

        <!-- <button
            *nzSpaceItem
            nz-button
            nzType="primary"
            nzDanger
            (click)="handleBatchDel()"
        >
            批量删除
        </button> -->
    </nz-space>
</app-toolbar>

<div nz-row [nzGutter]="16" class="card">
    <div
        nz-col
        *ngFor="let item of datum"
        class="card-item"
        (click)="informate(item)"
    >
        <app-card
            [img]="'server.png'"
            [id]="item.id"
            [name]="item.name"
            [title]="'总线'"
        ></app-card>
    </div>
</div>

<!-- <ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table
  #basicTable
  [nzData]="datum"
  [nzLoading]="loading" 
  [nzScroll]="getTableHeight()"
  nzShowPagination
  nzShowSizeChanger
  [nzFrontPagination]="false"
  [nzTotal]="total"
  [nzShowTotal]="totalTemplate"
  (nzPageSizeChange)="pageSizeChange($event)"
  (nzPageIndexChange)="pageIndexChange($event)"
  [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex"
  (nzQueryParams)="onQuery($event)"
>
  <thead>
    <tr>
      <th
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="handleAllChecked($event)"
      ></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="desc">说明</th>
      <th nzColumnKey="port" [nzSortFn]="true">端口</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="handleItemChecked(data.id, $event)"
      ></td>
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.desc }}</td>
      <td>{{ data.port }}</td>
      <td>{{ data.created | date }}</td>
      <td>
        <a (click)="handleEdit(data.id)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a
          nz-popconfirm
          nzPopconfirmTitle="确定删除?"
          (nzOnConfirm)="delete(data.id)"
          (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft"
        >
          <i nz-icon nzType="delete"></i>
        </a>
      </td>
    </tr>
  </tbody>
</nz-table> -->

<app-detail
    [isVisible]="isVisible"
    [title]="'总线'"
    [chooseData]="chooseData"
    (edit)="handleEdit($event)"
    (delete)="delete($event)"
    (close)="close()"
></app-detail>

<nz-pagination
    style="position: fixed;  bottom: 0; right: 10px ; "
    [nzPageIndex]="pageIndex"
    [nzTotal]="total"
    nzShowSizeChanger
    [nzPageSize]="pageSize"
    (nzPageSizeChange)="pageSizeChange($event)"
    (nzPageIndexChange)="pageIndexChange($event)"
></nz-pagination>